@(session: MovieSession, seatForm: Form[SeatForm])(implicit lang: Lang)

@import helper._


<h4>@session.movie.infos.get(0).name (@Messages("movie.house",session.house.id)(lang))</h4>
<table class="table">
	<thead>
		<tr>
			<th width="25%">@Messages("movie.date")(lang)</th>
			<th width="60%">@Messages("movie.time")(lang)</th>
			<th width="15%">@Messages("movie.price")(lang)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>@session.showtime.format("dd-MM-yyyy")</td>
			<td>@session.showtime.format("hh:mmaa") - @(new Date(session.showtime.getTime()+(60*1000*session.movie.duration)).format("hh:mmaa")) (@(session.movie.duration)@(Messages("movie.minutes")(lang)))</td>
			<td id="ticketPrice">$@session.price</td>
		</tr>
	</tbody>
</table>
<table class="table" id="chosenSeat">
	<thead>
		<tr>
			<th width="25%">@Messages("movie.seat")(lang)</th>
			<th width="60%">@Messages("movie.type")(lang)</th>
			<th width="15%">@Messages("movie.price")(lang)</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td style="text-align:right">@Messages("movie.ticket.total")(lang):</td>
			<td id="ticketTotal">$0</td>
		</tr>
	</tfoot>
</table>

@helper.form(action = routes.MovieManager.payment) {
	<input type="hidden" name="session" value="@session.id">
	<input type="hidden" name="language" value="@lang.code">
	<input type="hidden" id="seats" name="seats" value="@seatForm("seats").valueOr("")">
	<button id="continue" type="submit" class="btn btn-success btn-block" disabled="disabled"><i class="icon-shopping-cart icon-white"></i> @Messages("movie.continue")(lang)</button>
}

<script>
	$(function(){

		$.blockUI({ css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
        } });

		$.get("@routes.MovieManager.checkAvailableSeat(session.id)", function(data) {
			var hold = data.hold;
			var sold = data.sold;
			var unavailable = data.unavailable;

			for(var i=0;i<hold.length;i++){
				$("[data-seat="+hold[i]+"]").addClass("hold");
			}

			for(var i=0;i<sold.length;i++){
				$("[data-seat="+sold[i]+"]").addClass("sold");
			}
			for(var i=0;i<unavailable.length;i++){
				$("[data-seat="+unavailable[i]+"]").addClass("null");
			}

			$('td.seat:not(.null):not(.hold):not(.sold):not(.demo):not(.demo-description)').click(function(e){

				var price = parseInt($("td#ticketPrice").text().substring(1));
				var quantity = parseInt($('td.seat.selected:not(.demo):not(.demo-description)').size());
				var seat = $(e.currentTarget).data("seat");

				if($(e.currentTarget).hasClass('selected')){
					$("tr#seat"+seat).remove();
					$(e.currentTarget).removeClass('selected');
					$('#ticketTotal').text("$"+(quantity-1)*price);

					var seats = new Array();
					$("td.seat.selected").each(function(){
						seats.push($(this).data("seat"));
					});

					$("input#seats").val(seats.join(':'));

				} else {
					if(quantity < 6){
						$("table#chosenSeat tbody").append(
							"<tr id='seat" + seat + "'><td>" + seat + "</td><td>@Messages("movie.adult")(lang)</td><td>$" + price + "</td></tr>"
						);
						$(e.currentTarget).addClass('selected');
						$('#ticketTotal').text("$"+(quantity+1)*price);

						var seats = new Array();
						$("td.seat.selected").each(function(){
							seats.push($(this).data("seat"));
						});

						$("input#seats").val(seats.join(':'));
					}
				}

				if(parseInt($('td.seat.selected:not(.demo):not(.demo-description)').size()) == 0){
					$("button#continue").attr("disabled",true);
				} else {
					$("button#continue").attr("disabled",false);
				}
			});

			$.unblockUI();
		});

	});
</script>